<template>
  <div class="table-view-container">
    <a-tabs :default-active-key="1">
      <a-tab-pane
        v-for="tabItem in tabsData" 
        :key="tabItem.key"
        :tab="tabItem.tab">
        <component :is="tabItem.component"></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>

import SimpleTable from './components/SimpleTable'
import SimplePageTable from './components/SimplePageTable'
import AddRowTable from "./components/AddRowTable"
import AddColTable from "./components/AddColTable"
import EditRowTable from "./components/EditRowTable"
import MergeThTable from "./components/MergeThTable"
import FlodRowTable from "./components/FlodRowTable"
import SearchAreaTable from "./components/SearchAreaTable"

export default {
  name: 'TableView',
  components: {
    SimpleTable,
    AddRowTable,
    AddColTable,
    MergeThTable,
    EditRowTable,
    FlodRowTable,
    SearchAreaTable,
    SimplePageTable,
  },
  data() {
    return {
      tabsData: [
        { key: 1, tab: "无分页", component: 'SimpleTable' },
        { key: 2, tab: "带分页", component: 'SimplePageTable' },
        { key: 3, tab: "可编辑行", component: 'EditRowTable' },
        { key: 4, tab: "可新增行", component: 'AddRowTable' },
        { key: 5, tab: "可新增列", component: 'AddColTable' },
        { key: 6, tab: "可新增合并列", component: 'MergeThTable' },
        { key: 7, tab: "可折叠行", component: 'FlodRowTable' },
        { key: 8, tab: "带搜索区域", component: 'SearchAreaTable' },
      ],
    }
  },
}
</script>
<style lang="scss">
.table-view-container {
  .operator-area {
    margin-bottom: 10px;
    .ant-btn {
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
</style>